<template>
    <div>
        <p>{{fullName}}</p>
        <button @click="changeName">改变当前fullname</button>
        <p>{{fullName2}}</p>
        <button @click="changeName2">改变当前fullName2</button>
    </div>
</template>

<script>
import { ref, computed } from "vue";
export default {
    setup(props) {
        const firstName = ref("kobe")
        const lastName = ref("Bryant")
        const firstName2 = ref("kobe")
        const lastName2 = ref("Bryant")
        //1.用法1:传入一个getter函数
        const fullName = computed(() => {   //这是具有响应式的computed
            return firstName.value + " " + lastName.value
        })
        //2.用法2:传入一个对象,对象包括getter/setter
        const fullName2 = computed({
            get:()=>firstName2.value + " " + lastName2.value,
            set(newVal){
                const names = newVal.split(" ");
                firstName2.value = names[0];
                lastName2.value = names[1];
            }
        })
        const changeName = ()=>{
            firstName.value = "Afs"
        }
        const changeName2 = ()=>{
            fullName2.value = "Lion Lee"
        }


        return {
            firstName,
            lastName,
            fullName,
            fullName2,
            changeName,
            changeName2
        }
    }
}
</script>

<style lang="scss" scoped>
</style>